<template>
	<view class="com-order-container">
		<view class="backHome" >
			<view class="text-center">
				<view @click="backHomeBtn(1)">
					<view>
						<text class="cuIcon-homefill"></text>
					</view>
					<view class="base-font-24">首页</view>
				</view>
				<view class="sortLine"></view>
				<view @click="backHomeBtn(2)">
					<view class="margin-top-sm">
						<text class="cuIcon-back"></text>
					</view>
					<view class="base-font-24">返回</view>
				</view>
				
			</view>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" top="10" @down="downCallback" :up="upOption"
			@up="upCallback" >
			<view class="padding-lr" >
				<view @tap="$jumpPage" data-jumpType="2" :data-jumpUrl="'/pages/index/desc?id='+item.id"  class="bg-white radius-16  listItem" v-for="(item,index) in list" :key="index">
					<view class="flex justify-between">
						<view class="leftInfo">
							<view class="base-font-32 text-000 ellipsis2">{{item.name}}</view>
							<view class="margin-top base-font-24 text-999"><text class="margin-right-xl" v-if="item.createTimeStr">{{item.createTimeStr.substr(0,16)}}</text>阅读<text class="margin-left-xs">{{item.readNum}}</text></view>
						</view>
						<view class="padding-left-sm" style="flex-shrink:1;" v-if="$util.isNotBlank(item.image)">
							<view class="rightImg">
								<image :src="item.image" mode="aspectFill"></image>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</mescroll-uni>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import api from '@/utils/api.js';
	import siteApi from '@/utils/siteApi.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				reload: '',
				upOption: {
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 暂无无数据 ~'
					},
				},
				list: [],
				categoryId:""
			
				
			}
		},
		onShow(options) {
			let _slef=this;
			api.initReload(function(){
				_slef.initData();
			})
		},
		onLoad: function(options) {
			
			this.categoryId=options.id
			
			if(this.$util.isNotEmpty(this.categoryId)){
				// this.id=id;
				this.resetData();
			}else{
				uni.showToast({
				  title:'id不能为空',
				  duration:200
				})
				uni.navigateBack();
			}
		},
		methods: {
			backHomeBtn(type){
				if(type===2){
					uni.setStorageSync('isBack', true);
				}
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
		
			resetData: function(e) {
				this.list = [];
				if(this.$util.isNotEmpty(this.mescroll)){
					this.mescroll.resetUpScroll();
				}
				
			},
			// 主动触发下拉刷新
			triggerDownScroll() {
				this.mescroll.scrollTo(0, 0)
				this.mescroll.triggerDownScroll();
			},
			// 滚动到指定位置,传数字 (单位px)
			scrollToY(y) {
				this.mescroll.scrollTo(y, 0); // 无过渡动画
			},
			// 滚动到指定view,传view的id
			scrollIntoView(viewId) {
				this.mescroll.scrollTo(viewId, 0); // 无过渡动画
			},
			upCallback(page) {
				let _self = this;
				siteApi.selectWxNoticePage({
					pageNum: page.num,
					pageSize: page.size,
					categoryId: this.categoryId
				}).then(
					res => {
						var _data = res.data;
						let data = new Array();
						if (_data) {
							_data.forEach(e => {
								e.createTime = _self.$util.formatDate(e.createTime);
								data.push(e);
							})
						}
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						_self.mescroll.endSuccess(data.length);
						//设置列表数据
						if (page.num == 1) _self.list = []; //如果是第一页需手动制空列表
						_self.list = _self.list.concat(data); //追加新数据
		
					}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
			}
		}
		
	}
</script>
<style>
	.cust-text-orange{color:#ff9e00;padding:0!important;margin:0 30rpx!important;}
	.custTabStyle{padding:0!important;margin:0 30rpx!important;}
</style>
<style scoped lang="scss">
	
	@import "../../static/css/variables.scss";
	.com-order-container{
		.sortLine{height:1rpx;border-top:1rpx solid #eeeeee;margin-top:20rpx;}
		background: #FFFFFF;min-height:100vh;
		.backHome{position: fixed;top:45vh;z-index:99;left:0;background: #ffffff;box-shadow:0 0 20rpx #ddd;border-radius:0 20rpx 20rpx 0;padding:20rpx;}
		.listItem{
			padding:30rpx 0;
			border-bottom:1rpx solid #eeeeee;
			.leftInfo{flex-grow:1;}
			.rightImg{width:220rpx;height:150rpx;border-radius:15rpx;
				image{width:220rpx;height:150rpx;border-radius:15rpx;}
			}
		}
		
	}
</style>